<template>
  <div class="content-in">
    <div
      v-for="(navbar, index) in navbars"
      :key="navbar.id"
      class="row"
      :style="{
        backgroundImage: `url(${images[index]})`,
      }"
    >
      <div class="row-title">{{ navbar[`name${capitalizeLang}`] }}</div>
      <div class="row-subtitle">{{ navbar[`subtitle${capitalizeLang}`] }}</div>
      <span class="more" @click="handleTabChange(navbar)">{{ $t('common.learnMore') }} ></span>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
export default {
  props: {},
  data() {
    return {
      list: ['1', '2', '3', '4'],
      images: [
        require('@/assets/images/solution/1.png'),
        require('@/assets/images/solution/2.png'),
        require('@/assets/images/solution/3.png'),
        require('@/assets/images/solution/4.png'),
        require('@/assets/images/solution/5.png'),
        require('@/assets/images/solution/6.png'),
        require('@/assets/images/solution/7.png'),
        require('@/assets/images/solution/8.png'),
        require('@/assets/images/solution/9.png'),
        require('@/assets/images/solution/10.png'),
        require('@/assets/images/solution/11.png'),
        require('@/assets/images/solution/12.png'),
      ],
    }
  },
  computed: {
    ...mapGetters(['capitalizeLang']),
    ...mapState(['menus', 'lang']),
    navbars() {
      return this.menus[0].children
    },
  },
  methods: {
    handleTabChange(item) {
      if (!item?.children?.[0]) {
        this.$message.warning('暂无数据，敬请期待')
        return
      }
      this.$router.push({
        path: '/solution',
        query: {
          id: item?.children?.[0].url,
          type: item?.children?.[0].classificationType,
          createTime: item?.children?.[0].createTime,
        },
      })
    },
  },
}
</script>

<style lang="less" scoped>
.content-in {
  padding: 24px;

  .row {
    height: 400px;
    text-align: center;
    padding: 60px 36px 0 36px;
    background-size: 100% 100%;
    color: #fff;
    margin-bottom: 20px;
    transition: 0.3s all linear;
    display: flex;
    flex-direction: column;

    &:hover {
      background-size: 106% 106%;
      background-position: center;
    }

    &-title {
      font-size: 30px;
      font-weight: 500;
      line-height: 67px;
    }

    &-subtitle {
      font-size: 24px;
      font-weight: 500;
      line-height: 30px;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .more {
      margin: 30px auto 0 auto;
      padding: 0 18px;
      height: 42px;
      line-height: 42px;
      border-radius: 21px;
      display: block;
      font-size: 24px;
      font-weight: 400;
      color: #fff;
      background-color: #0261bc;
      width: 200px;
    }
  }
}
</style>
